<template>
	<div class="content">
		<h2><i class="iconfont icon-yishangjia1"></i>已上架商品管理</h2>
		<div class="content-wrap">
			<!--搜索分类-->
			<div class="search-list">
				<!--按关键字分类(商品id，商品编号，商品标题)-->
				<div class="search-list-item">
					<div class="keyword-tag" style="color: #f60;">是否为点分商品</div>
					<el-select  size="small" v-model="params.is_fen" @change="getDianfenGoods">
						<el-option label="一般商品" :value="0"></el-option>
						<el-option label="点分商品" :value="1"></el-option>
					</el-select>
				</div>
				<!--按商品类型来进行分类-->
				<div class="goods-classify">
					<div class="classify-tag">商品分类</div>
					<s-cascader @getclassify="handleClassify"></s-cascader>
				</div>
				<div class="goods-keyword search-list-item">
					<div class="keyword-tag">关键字</div>
					<el-input placeholder="商品描述" size="small" v-model="params.commodity_name"></el-input>
				</div>
				<div class="goods-search-btn">
					<el-button size="small" type="success" icon="el-icon-search" @click="searchGoods">搜索</el-button>
				</div>
				<div class="goods-del">
					<el-button size="small" type="danger" @click="removeMultiGoods">批量下架</el-button>
				</div>
			</div>
			<!--商品展示表格-->
			<div class="content-table" v-loading="loading">
				<el-table :data="onshielfGoods" strip @selection-change="handleSelect" height="550">
					<el-table-column type="selection"></el-table-column>
					<el-table-column label="商品编号" prop="commodity_no" ></el-table-column>
					<el-table-column label="商品描述" prop="commodity_name" width="350">
						<template slot-scope="scope">
							<div class="goods-name">
								<img :src="scope.row.mainimg.url" alt="" v-if="scope.row.mainimg"/>
								<span class="goods-name-des">{{scope.row.commodity_name}}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="吊牌价格" prop="price.price">
						<template slot-scope="scope">
							<span v-if="scope.row.price">{{scope.row.price.price}}元</span>
						</template>
					</el-table-column>
					<el-table-column label="卖价" prop="price.price">
						<template slot-scope="scope">
							<span v-if="scope.row.price">{{scope.row.price.sale_price}}元</span>
						</template>
					</el-table-column>
					<el-table-column label="上架日期" prop="price.price" width="150" >
						<template slot-scope="scope">
							<span>{{ scope.row.onshief_time | formatTime }}</span>
						</template>
					</el-table-column>
					<el-table-column label="库存" prop="stocks"></el-table-column>
					<el-table-column label="操作" align="center" width="150">
						<template slot-scope="scope">
							<el-button size="mini" type="danger" @click="removeGoods(scope.row.commodity_id)">下架</el-button>
							<el-button size="mini" @click="showGoodsDetail(scope.row.commodity_id)">详情</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</div>
		<el-pagination @current-change="handleCurrentChange" background layout="total, prev, pager, next, jumper" :total="totalNum" class="fr"></el-pagination>
	</div>
</template>

<script>
	/*import sCascader from "../../../components/cascader/cascader.vue"*/
	export default {
		created() {
			this.fetchGoodsData();
		},
		data() {
			return {
				/*请求参数*/
				params: {
					fields: "price,mainimg,bigimgs",	//额外的数据请
					page: 1,							//页数默认为1
					rows: 10,							//一页默认显示为10个
					commodity_name: "",					//商品名(用于搜索)
					provider_id: 1,						//商家类型，1代表天点自营
					is_fen: 0,							//是否为点分商品
					cateids: ""							//从服务器获取到的商品分类的值
				},
				/*选中的商品*/
				selectGoods: [],			//选中的等待批量上传的商品(没有选中时，会返回一个空数组)
				/*已上架商品*/
				onshielfGoods: null, 		//等待上传商品
				totalNum: 0,				//返回数据总数，用于分页那里显示
				/*其他参数*/
				loading: true				//加载小圈圈
			}
		},
		methods: {
			//====================================数据获取(与后台交互)===============================//
			/*向后台请求(待上架)商品数据*/
			fetchGoodsData() {
				var url = `${this.url}/commodity/item_get_onshielf_items.action`;
				var params = this.params;
				this.loading = true;
				this.$http.get(url,{ params }).then((res, err) => {
					if( res.data.success ) {
						this.loading = false;
						this.onshielfGoods = res.data.result.rows;
						this.totalNum = res.data.result.total;//获取分页个数
					}else {
						this.loading = false;
						this.$message({
							type: "error",
							message: res.data.result.errmsg
						});
					}
				});
			},
			/*商品下架(单个和批量下架)*/
			removeGoods(ids){
				if (typeof ids === "number") ids = String(ids);
				var url = `${this.url}/commodity/item_offshielf.action`;
				var params = { token: "3960c4db11d44c018898258d63d95bd0", ids }
				this.$http.get(url,{ params }).then((res) => {
					if( res.data.success ) {
						this.loading = true;
						this.fetchGoodsData();
					}else {
						this.loading = false;
						this.$message({
							type: "error",
							message: res.data.result.errmsg
						});
					}
				});
			},
			/*商品进行批量选择时触发row代表选择的那一行的所有数据(和服务器数据吻合)*/
			handleSelect(row) {
				this.selectGoods = row;
			},
			/*商品批量下架*/
			removeMultiGoods() {
				if ( this.selectGoods.length > 0 ) {
					var ids = this.selectGoods.map( (val)=>{ return val.commodity_id; } ).join(",");
					this.removeGoods(ids);
				}else {
					this.$message({
						message: "请至少选择需一个要上传的商品",
						type: "warning"
					});
				}
			},
			//================================获取不同的查询条件==================================//
			/*获取到商品分类的值*/
			handleClassify(val) {
				this.params.cateids = val.join(",");
				this.fetchGoodsData();
			},
			/*是否为点分商品*/
			getDianfenGoods() {
				this.fetchGoodsData();
			},
			/*是否满足搜索条件*/
			searchGoods() {
				this.fetchGoodsData();
			},
			//====================================其他请求=======================================//
			/*查看商品详情*/
			showGoodsDetail(id) {
				this.$router.push({
					name: "wait_goods_detail",
					query: { id }
				});
			},
			/*翻页时候向后台发送请求，page代表第几页*/
			handleCurrentChange(pages) {
				this.params.page = pages;
				this.fetchGoodsData();
			}
		}
	}
</script>

<style scoped lang="scss">
	/*条件搜索列表*/
	.search-list {
		padding-bottom: 2rem;
		min-height: 90px;
		>div {
			display: inline-block;
		}
		/*批量上架按钮*/
		.goods-del {
			margin-left: 10px;
		}
		/*关键字、商品分类*/
		.keyword-tag,
		.classify-tag {
			font-size: 15px;
			color: #555;
			margin-bottom: 2px;
		}
	}
	/*商品关键字宽度*/
	.goods-keyword {
		width: 100px;
	}
	/*商品分类列表宽度*/
	.goods-classify {
		width: 250px;
	}
	.el-cascader {
		width: 100%;
	}
	/*商品描述里面的文字和图片宽度设置*/
	.goods-name {
		>* {
			vertical-align: middle;
		}
		>img {
			width: 80px;
			height: 80px;
		}
		.goods-name-des {
			max-width: 200px;
			display: inline-block;
			text-align: left;
		}
	}
</style>